<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Create Test Bundle</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="Fancy Sliding Form with jQuery" />
        <meta name="keywords" content="jquery, form, sliding, usability, css3, validation, javascript"/>
        <link rel="stylesheet" href="../css/style.css" type="text/css" media="screen"/>
		<!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>-->
        <link rel="stylesheet" href="/EDFU/css/validationEngine.jquery.css" type="text/css"/>
		<link rel="stylesheet" href="css/jquery.countdown.css" type="text/css" media="screen"/>

		<style type="text/css">
		

		#defaultCountdown { width: 240px; height: 45px; }
		</style>

        <script type="text/javascript" src="/EDFU/js/jquery-1.7.1.js"></script>
		<script type="text/javascript" src="/EDFU/js/jquery-ui-1.8.16.custom.js"></script>
		<script src="/EDFU/js/languages/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8">
		</script>
		<script type="text/javascript" src="js/jquery.countdown.js"></script>
		<script src="/EDFU/js/jquery.validationEngine.js" type="text/javascript" charset="utf-8">
		</script>
	<!--	<script type="text/javascript" src="js/form.js"></script> -->
		<script>
		var currentPos = 0;
		var debug;
		jQuery(document).ready(function(){
			jQuery("#createTB").validationEngine();
			code = window.location.href.substring(window.location.href.indexOf("?code=")+6);
			startClock("defaultCountdown", {second : 10});
			
			
			$("#next").click(function (event) {
				storeAnswer();
				nextClick();

			});
			
			$("#prev").click(function (event) {
				storeAnswer();
				previousClick();
			});
			if(window.questionSet)
			{
				showQuestion(0);
			}
			
			});
			
			function storeAnswer()
			{
				ques = window.questionSet[currentPos];
				radioArray = $("input");
				ans = new Array();
				i=0;
				for(j=0; j<radioArray.length; j++)
				{
					if(radioArray[j].checked)
					{
						ans[i] = radioArray[j].value;
						i++;
					}
					
				}
				ques.answers = ans;
			}
			
			function showQuestion(index)
			{
				question = window.questionSet[index];
				$("#question").html(question.question);
				$("#answerContainer").empty();
				if(question.optionType == "SA")
				{
					noOption = question.options.length;
					innerHtml = '';
					
					for(i=0 ; i<question.options.length; i++)
					{
						if(question.answers)
						{
							if(question.options[i] == question.answers[0])
							{
								innerHtml += '<input type=radio name = singleOption onClick = getValue(event) value= ' + question.options[i] + ' checked = true>' + question.options[i] + '</br>';
							}
							else
							{
								innerHtml += '<input type=radio name = singleOption onClick = getValue(event) value= ' + question.options[i] + '>' + question.options[i] + '</br>';
							}
							
						}
						else
						{
							innerHtml += '<input type=radio name = singleOption onClick = getValue(event) value= ' + question.options[i] + '>' + question.options[i] + '</br>';

						}
					}
					
					$("#answerContainer").append(innerHtml);
					

				}
				else if(question.questionType == "MA")
				{
				}
				
				
			}
			
			function getValue(event)
			{
				debug = event;
				question = window.questionSet[currentPos]
			}
			
			function nextClick()
			{
				if(currentPos +1 == window.questionSet.length)
				{
					return;
				}
				currentPos++;
				showQuestion(currentPos);
			}
			
			function previousClick()
			{
				if(currentPos-1 < 0)
				{
					return;
				}
				currentPos--;
				showQuestion(currentPos);
			}
			
			function timeout()
			{
				alert("TIME is over Hahahaha");
			}
			
			function startClock(div, time)
			{
				alert("Inside clock");
				var timeInSec = 0;
				if(time.hour)
				{
					timeString = ' +' + time.hour + 'h';
					timeInSec += time.hour * 60 * 60;
				}
				if(time.minute)
				{
					timeString = ' +' + time.minute + 'm';
					timeInSec += time.minute * 60 ;

				}
				if(time.second)
				{
					timeString = ' +' + time.second + 's';
					timeInSec += time.second;

				}
				
				timeInSec = timeInSec * 1000;
				
				$("#" + div).countdown({until: timeString, format: 'HMS'});
				window.setTimeout("timeout()" , timeInSec);
			}
			
		

		function getQuestionCallback()
		{
			document.getElementById("startTest").disabled = "enable";
		}
		
		
		
	</script>
    </head>
    <style>
        span.reference{
            position:fixed;
            left:5px;
            top:5px;
            font-size:10px;
            text-shadow:1px 1px 1px #fff;
        }
        span.reference a{
            color:#555;
            text-decoration:none;
			text-transform:uppercase;
        }
        span.reference a:hover{
            color:#000;
            
        }
        h1{
            color:#ccc;
            font-size:36px;
            text-shadow:1px 1px 1px #fff;
            padding:20px;
        }
		#clockWid {
			float : right;
		}
		.questionCont 
		{
			float : left;
			height : 100%;
			width : 100%
		}
		.quest
		{
			align : center;
		}
		.navigation
		{
			float : right;
		}
		radio {
		float : left;
		}
		
		
    </style>
    <body>
	
		<div id="clockWid">
			<h1>Time Remaining</h1>
			<div id="defaultCountdown"></div>
		</div>
		
       <div id="contentx" class="questionCont">
            <h1>Questions</h1>
            <div id="wrapper1" class = "quest">
               <div id = "question" class="quest"/>
			   <div id="answerContainer" class="quest">
			 </div>
			  	
			</div>
        </div>
		
		
		<!--
		<div id="questionContainer">
			<div id="question">
			</div>
			<div id="answerContainer">
			</div>
		</div>
		-->
		<div id="questionNav" class = 'navigation'>
			<button id="next">Next</button>
			<button id="prev">Previous</button>
		</div>
		
		
    </body>
</html>